import { defineComponent, ref, reactive } from "vue";
import style from "./index.module.less";
import Field from "@/components/Field";
import { Picker, Popup } from "vant";
import { IFormItem, IFormTypeData } from "../../types";
import { getSize } from "@/command/apiTool";
import MenuGroup from "@/components/FilterMenu/Components/MenuGroup";
import RowView from "@/components/RowView";
export default defineComponent({
  name: "select-view",
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    item: {
      type: Object as () => IFormItem,
      default: () => {
        return {};
      },
    },
    typeData: {
      type: Array as () => IFormTypeData[],
      default: () => [],
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const showModal = ref(false);
    const newValue = ref("");
    return () => {
      function renderModal() {
        return (
          <Popup
            v-model:show={showModal.value}
            round={true}
            position="bottom"
            style={{
              padding: getSize(15),
              paddingTop: 0,
            }}
          >
            {/* <Picker
              onConfirm={(data) => {
                emit("change", data.selectedValues[0]);
                showModal.value = false;
              }}
              onCancel={() => (showModal.value = false)}
              columns={props.typeData?.map((e) => {
                return {
                  text: e.label,
                  value: e.value,
                };
              })}
              class={style.picker}
            /> */}
            <RowView
              class={"flex justify-between py-[10px] px-[5px]"}
              style={{
                borderBottom: "1px solid #F5F5F5",
              }}
            >
              <div onClick={() => (showModal.value = false)}>取消</div>
              <div
                class={"text-[#2395f8]"}
                onClick={() => {
                  emit("change", newValue.value);
                  showModal.value = false;
                }}
              >
                确定
              </div>
            </RowView>
            <div class={["overflow-y-scroll no-scrollbar", style.popupBox]}>
              <MenuGroup
                value={props.modelValue}
                onChange={(value: any) => {
                  console.log("value", value);
                  newValue.value = value;
                  // emit("change", value);
                }}
                data={props.typeData?.map((e) => {
                  return {
                    text: e.label,
                    value: e.value,
                  };
                })}
                class={style.MenuGroup}
              />
            </div>
          </Popup>
        );
      }
      const getValueName = () => {
        let newValue = [] as any;
        props.modelValue.split(",").forEach((item) => {
          let findData = props.typeData.find((e) => e.value == item);
          newValue.push(findData?.label);
        });
        if (props.modelValue) {
          return newValue.join(",");
        } else {
          return "";
        }
      };
      return (
        <div>
          <Field
            name={getValueName()}
            onClick={() => (showModal.value = true)}
            isLink={true}
          />
          {renderModal()}
        </div>
      );
    };
  },
});
